<template>
	<view>
		<search-slot>
			<template #left>
				<view class="search-left">
					<view class="iconfont icon-xiaoxi">

					</view>
				</view>
			</template>
			<template #center>
				<view class="flex-1 bg-light search-input" @click="goSearch">
					请输入搜索内容
				</view>
			</template>
			<template #right>
				<view class="search-right" @click="getScanCode">
					<view class="iconfont icon-saoma">

					</view>
				</view>
			</template>
		</search-slot>
		<view class="d-flex">
			<view class="span-5">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" :scroll-into-view="scrollIntoLeft">
					<view v-for="(item,i) in cateData" :key="i" :class="currentIndex==i?'action':''"
						class="left-item  d-flex a-center  j-center" @click="changeTitle(i)" :id="'tableft'+i">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="span-15">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" :scroll-into-view="scrollIntoRight"
					scroll-with-animation @scroll="scrollRight">
					<view v-for="(item,j) in cateData" :key="j" class="right-item d-flex flex-wrap" :id="'tabright'+j">
						<view class="item-cate span24-8 text-center" v-for="(cate,index) in item.app_category_items"
							:key="index">
							<image :src="cate.cover" mode=""></image>
							<view class="">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCate
	} from '../../api/index.js'
	export default {
		data() {
			return {
				top: [],
				rightTop: [],
				scrollIntoLeft: '',
				scrollIntoRight: '',
				currentIndex: 0,
				cateData: [],
				scrollH: 0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(88);
				}
			});

		},
		mounted() {
			this.getcate()
			this.initCate()
		},
		methods: {
			getcate() {
				getCate().then(res => {
					console.log('res', res);
					this.cateData = res.data
				})
			},
			//点击左侧标题
			changeTitle(i) {
				this.currentIndex = i
				this.scrollIntoRight = 'tabright' + i
			},
			scrollRight(e) {
				console.log('e', e);
				let scrollTop = e.detail.scrollTop+0.5;
				let index = this.rightTop.findIndex((v, i) => {
					return v > scrollTop
				})
				console.log('index', index);
				this.scrollIntoLeft = 'tabLeft'+index;
				this.currentIndex = index;
				this.scrollIntoRight = null;
				// console.log('this.scrollIntoRight',this.scrollIntoRight);
			},
			initCate() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.selectAll(".right-item")
						.boundingClientRect((data) => {
							//方法一
							// data.map((v, i) => {
							// 	this.rightTop.push(v.height)
							// 	console.log('wwwww', this.rightTop);
							// })
							// let arr = this.rightTop
							// for (var i = 1; i <arr.length; i++) {
							// 	arr[i] += arr[i - 1]
							// }
							// this.top = arr
							// console.log('thwwww',this.top);

							data.map((v, i) => {
								let topdata = i > 0 ? this.rightTop[i - 1] : 0;
								//  topdata = 0
								// topdata = this.rightTo[0]
								// topdata = this.rightTo[1]
								// topdata = this.rightTo[2]
								// topdata = this.rightTo[3]
								// topdata = this.rightTo[4]
								// topdata = this.rightTo[5]
								topdata += v.height;
								this.rightTop.push(topdata)
								console.log('thwwww', this.rightTop);
							})

						})
						.exec();
				}, 500)
			}
		}
	}
</script>

<style scoped>
	.search-left,
	.search-right {
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
	}

	.search-left .iconfont,
	.search-right .iconfont {
		font-size: 32rpx;
	}

	.search-input {
		height: 60rpx;
		line-height: 60rpx;
		color: #ccc;
		font-size: 28rpx;
		text-indent: 20rpx;
		border-radius: 30rpx;
	}

	.left-item {
		width: 100%;
		height: 120rpx;
	}

	.right-item image {
		width: 100rpx;
		height: 120rpx;
	}

	.right-item:last-child {
		background-color: #f00;
		padding-bottom: 80vh;
	}
</style>